import { h, VNode } from 'vue';
import { ElCheckboxGroup, ElDatePicker, ElFormItem, ElInput, ElOption, ElSelect, ElCheckbox } from 'element-plus';
import { Dictionary } from '@/global';

// 动态生成表单的类型
export enum FormItemType{
  input,
  datePicker,
  select,
  yearPicker,
  text,
  checkBoxGroup
}
export interface SelectOption extends Dictionary{

}
export interface CheckBoxOption extends Dictionary{
  disabled?: boolean;
}
// 表单属性配置
export interface FormItemConfig<T>{
  type: FormItemType,
  prop: keyof T;
  label?: string;
  labelWidth?: string;
  inputWidth?: string;
  disabled?: boolean;
  options?: SelectOption[] | CheckBoxOption[];
  onChange?: (val: any, formData: T) => any;
  onClick?: (formData: T) => any;
}
// 规定动态生成表单的函数类型
declare type CreateFormItem = <T>(config: FormItemConfig<T>, formData: T) => VNode

// 动态生成的日期组件
const createDatePicker: CreateFormItem = (config, formData) => {
  return <div></div>;
};
// 动态生成的输入框组件
const createFormInput: CreateFormItem = (config, formData) => {
  return <ElInput v-model:modelValue={formData[config.prop]} style={{ width: config.inputWidth }} disabled={config.disabled}></ElInput>;
};
// 动态生成的select组件
const createFormSelect: CreateFormItem = (config, formData) => {
  return <ElSelect v-model:modelValue={formData[config.prop]} style={{ width: config.inputWidth }}>
    {config.options?.map(item => <ElOption label={item.text} key={item.value} value={item.value}></ElOption>)}
  </ElSelect>;
};
// 动态生成的选择年份的组件
const createYearPicker: CreateFormItem = (config, formData) => {
  return <ElDatePicker type={'year'} v-model={formData[config.prop]} style={{ width: config.inputWidth }} onUpdate:modelValue={val => config.onChange && config.onChange(val, formData)}></ElDatePicker>;
};
// 动态生成的文本表单组件
const createFormText: CreateFormItem = (config, formData) => {
  return <div onClick={() => config.onClick && config.onClick(formData)}>{formData[config.prop]}</div>;
};

// 动态生成的复选框
const createFormCheckBoxGroup: CreateFormItem = (config, formData) => {
  return <ElCheckboxGroup v-model={formData[config.prop]} disabled={config.disabled}>
    {config.options?.map(item => <ElCheckbox disabled={(item as CheckBoxOption)?.disabled} label={item.value}>{item.text}</ElCheckbox>)}
  </ElCheckboxGroup>;
};
// 通过配置的type生成不同的表单对象
const formItemCreatorMap: {[key in FormItemType]: CreateFormItem} = {
  [FormItemType.input]: createFormInput,
  [FormItemType.datePicker]: createDatePicker,
  [FormItemType.yearPicker]: createYearPicker,
  [FormItemType.select]: createFormSelect,
  [FormItemType.text]: createFormText,
  [FormItemType.checkBoxGroup]: createFormCheckBoxGroup
};

// 根据配置生成单个表单元素
export const createFormItemFromConfig: <T>(config: FormItemConfig<any>, formData: any) => VNode = (config, formData): VNode => {
  return <ElFormItem label={config?.label}>{formItemCreatorMap[config.type](config, formData)}</ElFormItem>;
};

// 根据配置批量生成元素
export const createFromItemsFromConfig: <T>(config: FormItemConfig<T>[], formData: T) => VNode[] = (config, formData): VNode[] => {
  return config.map(item => createFormItemFromConfig(item, formData));
};
